<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>上传跑步打卡图片</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/upload.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<body>
<div class="container">
    <div class="top-header">
        <div class="avatar"><img src="./img/icon-user.png" alt=""></div>
        <div class="nickname">
            <p class="name">小白</p>
            <p class="year">2007（07届）</p>
        </div>
    </div>
    <div class="upload">
        <div class="title">上传你的跑步打卡图片</div>
        <div class="weui-uploader__input-box upload-box">
            <div class="text-upload">点击上传</div>
            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
        </div>
    </div>
    <div class="rule-text show">
        <p class="title">上传图片需注意事项：</p>
        <p>1.不要传与运动无关的图片</p>
        <p>2.不要传与政治有关的图片</p>
    </div>
    <div style="margin: 10px;">
        <div class="btn primary" style="margin-bottom: 10px;">上传/重新上传</div>
        <div class="btn ghost" style="margin-bottom: 10px;">完成提交</div>
    </div>
</div>
</body>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
</html>